<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember">记住用户名
    <ul id="xiaoyang">
        
    </ul>
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        
      
        if(localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }

        username.addEventListener('change',function(){
           
            if(this.checked){
                localStorage.setItem('username',username.value);
            }else {
                localStorage.removeItem('username');
            }
        })

        $(function(){
            $.ajax({
                url: 'http://localhost:3000/xiaoyang',          // 接口地址
                type: 'get',                                    // 接口的请求方式   get, post, put, delete
                dataType: 'json',                               // 数据返回的格式， json格式
                headers:{                                       // 请求头信息
                    'Content-Type':'application/json'           // 请求的文本格式
                },
                success:function(res){                          // 接口响应成功的回调
                    const { data } = res; // 数据结构出来
                    let htmlTemplate = '';// 初始化元素
                    data.forEach(e => {   // 把数据遍历出来
                        htmlTemplate += `<li><p>姓名：${e.name}</p><p>年龄：${e.age}</p></li>`
                    });
                      
                    $('#xiaoyang').append(htmlTemplate);    // 把元素添加到对应的节点上
                },
                error: function(err){                           // 接口响应失败的回调
                    console.log(err);
                }
            })
        })
       

    </script>
</body>
</html>